<template>
  <div class="pointListTable">
    <div class="Etitle">
      <el-row>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <!--<span @click="returnEquip" style="cursor: pointer; color: #27B3C7">{{this.pointCid}} </span> > 测点列表-->
            <!-- 站点名称 > 设备名称 > {{this.pointCid}} 测点信息 -->
            {{this.pointCid}} 测点信息
          </div>
        </el-col>
        <el-col :span="14"  style="text-align: right; padding-right: 7px">
          <div class="grid-content bg-purple-light">
            <span >
               <el-input  placeholder="" style="width: 300px; height: 30px" v-model="submitPoint.data.condition.search">
               </el-input>
               <i class="el-icon-search searchIcon" @click="queryPointData"></i>
            </span>
            <span>
              <el-button class="indieWidth" type="primary" @click="showRestorePointMask()" >
              <img :src="reduction" style="vertical-align: middle"/>还原测点
            </el-button>
            </span>
            <span>
            <el-button class="indieWidth deleteBtn" type="primary" @click="deletemore" :disabled="disabled">
              <img :src="Delete" style="vertical-align: middle"/>批量删除
            </el-button>
            </span>
            <span  class="toBack"  @click="returnEquip"><i class="el-icon-arrow-left"></i> 返回</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table safeTableList">
      <div class="pagination-container footerPage">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <el-table
        :data="pointData"
        border
        stripe border fit highlight-current-row
        style="width: 100%;height:500px; "
        :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
        @selection-change="moreDelete"
        height="800px"
      >
        <el-table-column type="selection" align="center" width="40px" @selection-change="moreDelete"></el-table-column>

        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          sortable
          width="170px">
          <template slot-scope="scope">
            <span v-if="scope.row.value3 === '0'">通讯正常</span>
            <span v-if="scope.row.value3 === '1'">通讯中断</span>
            <span v-if="scope.row.value3 != '1' && scope.row.value3 != '0'">通讯异常</span>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="240px"
        >
          <template slot-scope="scope">
            <span class="viewDetail" @click="showViewPointMask(scope.$index,scope.row)" title="查看" ></span>
            <span class="update" @click="showUpdatePointMask(scope.$index,scope.row)" title="编辑" ></span>
            <span class="delete" @click="deletePointData(scope.$index, scope.row)" title="删除" ></span>
            <delete-point-dialog></delete-point-dialog>
            <!--<el-dropdown trigger="click" class="overviewDropdown">
              <span class="el-dropdown-link">
                更多操作<i class="el-icon-caret-bottom"></i>
              </span> 
              <el-dropdown-menu slot="dropdown">
                <el-button class="associatedbuttom" type="button" @click="showconfigurationRuleMask(scope.$index, scope.row)">配置规则</el-button>——————
                <el-button class="associatedbuttom" type="button" @click="showapplicationMask(scope.$index, scope.row)">测点应用</el-button>
              </el-dropdown-menu>
            </el-dropdown>-->
            <el-button class="associatedbuttom" type="button" @click="showconfigurationRuleMask(scope.$index, scope.row)">配置规则</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <view-point-dialog v-if="viewPointFalse" @giveFalse="VdialogReturn" :viewPoint = 'viewPointData'></view-point-dialog>
    <update-point-dialog v-if="updatePointFalse" @giveFalse="updatedialogReturn" :viewPoint = 'viewPointData' :Pid = 'projectPid' v-on:diaStatus = "diaStaus"></update-point-dialog>
    <configuration-rule-dialog v-if="configurationRuleFalse" @giveFalse="configurationdialogReturn" :viewPoint = 'viewPointData'  :configPid = 'projectPid' :index = 'viewIndex' v-on:rerule = "reruleStaus"></configuration-rule-dialog>
    <point-application-dialog v-if="applicationFalse" @giveFalse="applicationdialogReturn" :viewPoint = 'viewPointData' :Pid = 'projectPid' v-on:restars = 'restarStaus'></point-application-dialog>
    <restore-point-dialog v-if="RestorePointFalse" @giveFalse="RestorePointFalseReturn" :Cid = 'this.pointCid' :Pid = 'projectPid' v-on:restars = 'restarStaus'></restore-point-dialog>

  </div>
</template>
<script>
  import axios from 'axios'
  import viewPointDialog from './viewPointDialog'
  import updatePointDialog from './updatePointDialog'
  import deletePointDialog from './deletePointDialog'
  import configurationRuleDialog from './ConfigurationRuleDialog'
  import pointApplicationDialog from './pointApplicationDialog'
  import RestorePointDialog from './RestorePoint'
  import detail from '@/assets/components/detail.png'
  import redact from '@/assets/components/redact.png'
  import wraningDelete from '@/assets/components/wraningDelete.png'
  import reduction from '@/assets/components/reduction.png'
  import Delete from '@/assets/components/delete.png'
  import Search from '@/assets/home/search.png'
  export default {
    props: {
      pointCid: '',
      activStatus: ''
    },
    components: { viewPointDialog, updatePointDialog, deletePointDialog, configurationRuleDialog, pointApplicationDialog, RestorePointDialog },
    data() {
      return {
        detail,
        redact,
        Search,
        wraningDelete,
        reduction, // 还原按钮
        Delete,
        sta: '',
        reactive: '1',
        restars: '1',
        disabled: true,
        viewPointFalse: false,
        updatePointFalse: false,
        configurationRuleFalse: false,
        applicationFalse: false,
        RestorePointFalse: false,
        viewPoint: {}, // 查看测点
        Cid: this.pointCid,
        viewPointData: {},
        viewIndex: '',
        projectPid: localStorage.getItem('num'),
        pointData: [], // 测点总览信息
        multipleSelection: '',
        submitPoint: {
          access_token: localStorage.getItem('access_token'),
          type: 'object_station_condition',
          data: {
            condition: {
              pid: 'default',
              cid: 'plc0003',
              search: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        deletePoint: {
          access_token: localStorage.getItem('access_token'),
          type: 'object_station_hide',
          pid: localStorage.getItem('num'),
          cid: this.pointCid,
          ids: []
        },
        // 还原测点
        reductionPoint: {
          access_token: localStorage.getItem('access_token'),
          type: 'object_station_restore',
          pid: this.$route.query.pid,
          cid: this.pointCid,
          ids: []
        },
        options: [],
        value: '',
        cols: [
          { prop: 'oid', label: '测点编号', width: '190px', sortable: true },
          { prop: 'name', label: '测点名称', width: '200px', sortable: true },
          { prop: 'type', label: '测点类型', width: '230px', sortable: true },
          { prop: 'show_data', label: '显示值' }
        ],
        total: 0
      }
    },
    mounted() {
      this.queryPointData()
      if (this.deletePoint.ids === []) {
        this.disabled = this.disabled
      } else {
        this.disabled = !this.disabled
      }
    },
    methods: {
      returnEquip() {
        this.active = '1'
        this.$emit('tabStaus', this.active)
      },
      showViewPointMask(index, row) {
        this.viewPointData = row
        this.viewPointFalse = !this.viewPointFalse
      },
      // 父组件接收值
      VdialogReturn(data) {
        this.viewPointFalse = data // data仅仅代表参数 这里等同于子组件roleDialogMask
      },
      showUpdatePointMask(index, row) {
        this.viewPointData = row
        this.updatePointFalse = !this.updatePointFalse
      },
      // 修改测点信息，父组件接收值
      updatedialogReturn(data) {
        this.updatePointFalse = data
      },
      showconfigurationRuleMask(index, row) {
        this.viewIndex = index
        this.viewPointData = row
        this.configurationRuleFalse = !this.configurationRuleFalse
      },
      // 配置规则信息，父组件接收值
      configurationdialogReturn(data) {
        this.configurationRuleFalse = data
      },
      showapplicationMask(index, row) {
        this.viewPointData = row
        this.applicationFalse = !this.applicationFalse
      },
      // 测点应用，父组件接收值
      applicationdialogReturn(data) {
        this.applicationFalse = data
      },
      showRestorePointMask() {
        this.RestorePointFalse = !this.RestorePointFalse
      },
      // 还原测点，父组件接收值
      RestorePointFalseReturn(data) {
        this.RestorePointFalse = data
      },
      // 查询测点信息
      queryPointData() {
        this.submitPoint.data.condition.pid = this.projectPid
        this.submitPoint.data.condition.cid = this.pointCid
        axios.post('/project', this.submitPoint, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.pointData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.submitPoint.data.page.page_number = (val) + ''
        this.queryPointData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.submitPoint.data.page.page_size = (pageSize) + ''
        this.queryPointData()
      },
      // 修改成功监听刷新列表
      diaStaus: function(dialogStatus) {
        this.reactive = dialogStatus
        console.log(this.reactive)
        this.queryPointData()
      },
      // 还原成功监听刷新列表
      restarStaus: function(dialogStatus) {
        this.restars = dialogStatus
        this.queryPointData()
      },
      // 配置规则配置成功监听刷新列表
      reruleStaus: function(dialogStatus) {
        this.restars = dialogStatus
        this.queryPointData()
      },
      // 删除测点
      deletePointData(index, row) {
        console.log(row)
        var deleteid = []
        deleteid.push(row.oid)
        this.deletePoint.ids = deleteid
        this.deletePoint.cid = row.cid
        this.$confirm('确认删除测点？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          axios.post('/project', this.deletePoint, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.queryPointData()
          })
        }).catch(() => {
        })
      },
      // 获取多选项
      moreDelete(val) {
        this.multipleSelection = val
        var deletemoreid = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          deletemoreid.push(this.multipleSelection[i].oid)
        }
        this.deletePoint.ids = deletemoreid
        this.reductionPoint.ids = deletemoreid
      },
      // 多个删除
      deletemore() {
        if (this.deletePoint.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请勾选要批量删除的测点！',
            type: 'warning'
          })
        } else {
          this.$confirm('确认删除测点？', '提示', {
            cancelButtonClass: 'userCancel',
            confirmButtonClass: 'userConfirm',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res) => {
            axios.post('/project', this.deletePoint, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.queryPointData()
            })
          }).catch(() => {
          })
        }
      },
      // 还原测点
      queryReductionPoint() {
        axios.post('/project', this.reductionPoint, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryPointData()
        })
          .catch(function(error) {
            console.log(error)
          })
      }

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .pointListTable{
    width: 100%;
    height: 500px 
    
  }
  /deep/ .el-table td{
    border-bottom: none;
    border-right: none;
    padding: 2px 0;
  }
  .searchIcon{
    color: #0072F3;
    cursor: pointer;
    margin-left: -24px;
    position: absolute;
    z-index: 100;
    margin-top: 17px;
  }
  .toBack{
    cursor: pointer;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:#0072F3;
    margin-left: 20px;
    margin-right: 10px;
  }
  /*/deep/ .el-table th, .el-table td {*/
    /*padding: 0px 0;*/
    /*min-width: 0;*/
    /*-webkit-box-sizing: border-box;*/
    /*box-sizing: border-box;*/
    /*text-overflow: ellipsis;*/
    /*vertical-align: middle;*/
    /*position: relative;*/
  /*}*/
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 30px;
    outline: none;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
  }
  .Etitle{
    width: 100%;
    height: 50px;
    font-size:14px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    color:rgba(50,56,66,1);
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    line-height:50px;
    padding-left: 20px;
    /deep/ .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 30px;
      line-height: 30px;
      outline: none;
      padding: 0 15px;
      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
  }

  /deep/ .clear{
    padding: 6px 16px;
    background-color: #333B3D;
    border-color: #333B3D ;
    color: #fff;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  .deleteBtn{
    background-color: #526D89;
    border-color: #526D89;
  }

  // 更多信息
  /deep/ .overviewDropdown {
    width:74px;
    margin-left: 5px;
    top: 0px;
    cursor: pointer;
  }
  /deep/ .el-dropdown-link {
    font-size: 10px;
    padding:2px;
    color: #0072F3;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .associatedbuttom {
    text-align: left;
    color: #323842;
    border: none;
    margin-left: 5px;
    padding: 7px;
    height: 24px;
    width: 88px;
    font-size: 12px;
  }
  /deep/ .associatedbuttom:hover {
    background: #fff;
    color: #0072F3;
  }
  /deep/ .associatedbuttom:active {
    background: #fff;
    color: #0072F3;
  }
  /deep/ .delete {
    display: inline;
    margin-left: 5px;
  }
  .footerPage{
    float: right;
    right:20px;
    position: relative;
    margin: 5px 0px;
  }
  .safeTableList {
    background-color: white;
    /deep/ .el-button + .el-button {
      margin-left: 0px;
    }
    .viewDetail{
      padding: 2px 9px 3px 14px;
      background: url('../../../assets/reports/detail_normal.png') no-repeat center;
    }
    .viewDetail:hover{
      cursor: pointer;
      padding: 2px 9px 3px 14px;
      background: url('../../../assets/reports/detail_hover.png') no-repeat center;
    }
    .update{
      padding: 2px 9px 3px 14px;
      background: url('../../../assets/reports/redact_normal.png') no-repeat center;
    }
    .update:hover{
      cursor: pointer;
      padding: 2px 9px 3px 14px;
      background: url('../../../assets/reports/redact_hover.png') no-repeat center;
    }
    .delete{
      padding: 2px 9px 3px 14px;
      background: url('../../../assets/reports/delete_normal.png') no-repeat center;
    }
    .delete:hover{
      cursor: pointer;
      padding: 2px 9px 3px 14px;
      background: url('../../../assets/reports/delete_hover.png') no-repeat center;
    }

  }
</style>
